<template>
    <div class="sellList warp">
        <div class="lots_type">
            <div class="table">
                <div class="tr_border">
                    <div class="td_type">
                        物资类型
                    </div>
                    <div class="td_all">
                        <div class="td_all_val" @click="typeAll">全部</div>
                        <div class="ta_all_item">
                            <ul class="all_item_ul" style="height: auto;">
                                <li v-for="value in lotsTypeList" :key="value.id" @click="showLotsChildren(value.children,value.id)">
                                    <span :class='{stateFoucs:lotsLX==value.id}'>{{value.classname}}</span>
                                </li>
                            </ul>
                            <div v-show="typeAllShow" class="all_item_value">
                                <ul>
                                    <li>
                                      <span class="all_li_span" @click="typeChildAll">全部</span>  
                                    </li>
                                    <li v-for="(val,i) in lotsTypeListChildren" :key="i" @click="lotsTypeChild(val.id,i)">
                                        <span :class='{stateFoucs:lotsChildLX==i}'>{{val.classname}}</span>
                                    </li>
                                </ul> 
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tr_border">
                    <div class="td_type">
                        物资所在地
                    </div>
                    <div class="td_all">
                        <div class="td_all_val" @click="adressAll">全部</div>
                        <div class="ta_all_item">
                            <ul class="all_item_ul" style="height: auto;">
                                <li v-for="value in areaList" :key="value.id" @click="showAreaChildren(value.children,value.id)">
                                    <span :class='{stateFoucs:lotsAreaStyle==value.id}'>{{value.name}}</span>
                                </li>
                            </ul>
                            <div v-show="adressAllShow" class="all_item_value">
                                <ul>
                                    <li>
                                      <span class="all_li_span" @click="adressChildAll">全部</span>  
                                    </li>
                                    <li v-for="(val,i) in areaListChildren" :key="i" @click="lotsAreaChild(val.id,i)">
                                        <span :class='{stateFoucs:AreaChildStyle==i}'>{{val.name}}</span>
                                    </li>
                                </ul> 
                            </div>
                        </div>
                    </div>
                </div>
                <div  class="tr_border">
                    <div class="td_type">
                        物资处理方式
                    </div>
                    <div class="td_all stateAll">
                        <ul class="all_item_ul">
                            <li v-for="(val,i) in disposeStateList" :key="i" @click="stateListChild(val.id,i)">
                                <span :class='{stateFoucs:stateDisposeStyle==val.id}'>{{val.val}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="filterObj.type =='1'">
            <el-empty v-if="emptyShow" :description=description :image-size="300"></el-empty> 
            <ul class="pai-item-list" v-else>
                <li class="pai-item" v-for="item in list" :key="item.id">
                    <div class="link_wrap" @click="routeDetail(item)">
                    <!-- <div class="link_wrap"> -->
                        <el-card class="item_card" :body-style="{ padding: '0px' }">
                        <div class="image">
                            <img :src="imgurls+item.images" class="lot_pic">
                        </div> 
                        <div class="item_content">
                            <div class="item_title">
                                <span>{{item.name}}</span>
                            </div>
                            <div class="item_money">
                                <p>清场时间：{{item.sell_date}}</p>
                                <div class="item_money_time">
                                    <p>
                                        <span class="red moneyBig">￥{{item.transaction_price}}</span>
                                    </p>
                                    <p class="buleBtn" v-if="item.is_business==1">出租</p>
                                    <p class="yellowBtn" v-else>出售</p>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    </div>  
                </li>
            </ul>
        </div>
        <div v-else>
            <el-empty v-if="emptyShowBeg" :description=description :image-size="300"></el-empty> 
            <ul class="pai-item-list" v-else>
                <li class="pai-item" v-for="item in begList" :key="item.id">
                    <div class="link_wrap" @click="buyDetail(item)">
                        <el-card class="item_card" :body-style="{ padding: '0px' }">
                        <div class="image">
                            <img :src="imgurls+item.images" class="lot_pic">
                        </div> 
                        <div class="item_content">
                            <div class="item_title">
                                <span>{{item.name}}</span>
                            </div>
                            <div class="item_money">
                                <p>清场时间：{{item.sell_date}}</p>
                                <div class="item_money_time">
                                    <p>
                                        <span class="red moneyBig">￥{{item.transaction_price}}</span>
                                    </p>
                                    <p class="buleBtn" v-if="item.is_business=='3'">求租</p>
                                    <p class="yellowBtn" v-else>求购</p>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    </div>  
                </li>
            </ul>
        </div>
       
        <div class="footer_page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="filterObj.page"
                :page-sizes="[12,20, 30, 40,50]" :page-size="filterObj.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>  
        </div>
    </div>
</template>

<script>
import {LotsTypeList,AreaList,wasteList,} from '@/api/interface'
export default {
    data(){
        return{
            emptyShow:false,
            emptyShowBeg:false,
            description:'',
            list:[],  //出租出售列表
            begList:[], //求租求购列表
            total: 0,
            filterObj:{
                page:1,
                limit:12,
                type_pid:'',
                type_id:'',
                location_pid:'',
                location_id:'',
                type:''
            },
            lotsTypeList:[],
            lotsTypeListChildren:[],
            areaList:[],
            areaListChildren:[],
            disposeStateList:[{id:'1',val:'出租出售'},{id:'2',val:'求租求购'}],
            typeAllShow:false,
            adressAllShow:false,
            lotsLX:null,
            lotsChildLX:null,
            lotsAreaStyle:null,
            AreaChildStyle:null,
            stateDisposeStyle:null,
            stateFoucs:'stateFoucs',
        }
    },
    watch:{
        filterObj:{
            handler(val){
                // console.log('obj',val);
                let newObj = Object.assign({uid:''}, val)
                this.getLotsCardList(newObj);
            },
            deep: true
        }
    },
    created(){
        var query = this.$route.query;
        this.filterObj.type = query.typeOnly;
        this.stateDisposeStyle = query.typeOnly;
        this.getLotsTypeList();
    },
    methods:{
        getLotsTypeList(){
            LotsTypeList().then((res) => {
                this.lotsTypeList=res.data;
            });
            AreaList().then(res=>{
                this.areaList=res.data;
            }); 
        },
        getLotsCardList(obj){
            wasteList(obj).then(res=>{
                if(res.code == 200){
                    if(obj.type=='1'){
                        
                        this.emptyShow = false;
                        this.list=res.data;
                        console.log(this.emptyShow);
                    }else{
                        this.emptyShowBeg = false;
                        this.begList=res.data;
                    }
                    
                }else{
                    if(obj.type=='1'){
                        this.emptyShow = true;
                        this.description = res.msg;
                        this.list=[];
                    }else{
                        this.emptyShowBeg = true;
                        this.description = res.msg;
                        this.begList=[];
                    }
                } 
            }).catch(err =>{
                this.emptyShow = true;
                this.description = err.msg;
                this.list=[];
            });
        },
        routeDetail(val){
            let {href}= this.$router.resolve({
                path: '/wasteShopping/shopDetails',   // 这里写的是要跳转的路由地址
                query: {wasteId:val.id}// 这里写的是页面参数
            });
            window.open(href, '_blank');
        },
         //展示标的类型列表li的内容
         showLotsChildren(children,pid){
            this.lotsTypeListChildren = children;
            this.lotsLX = pid;
            this.typeAllShow = true;
            this.filterObj.type_pid =pid;
        },
        typeChildAll(){
            this.lotsChildLX = null;
            this.filterObj.type_id='';
        },
        //展示标的所在地列表li的内容
        showAreaChildren(children,pid){
            this.areaListChildren=children;
            this.adressAllShow = true;
            this.filterObj.location_pid =pid; 
            this.lotsAreaStyle = pid;
        },
        adressChildAll(){
            this.filterObj.location_id='';
            this.AreaChildStyle = null;
        },
        lotsTypeChild(id,index){
            this.filterObj.type_id=id;
            this.lotsChildLX = index;
        },
        lotsAreaChild(id,index){
            this.filterObj.location_id=id;
            this.AreaChildStyle = index;
        },
        stateListChild(id,index){
            this.filterObj.type=id;
            this.stateDisposeStyle = id;
        },
        //物资类型的全部点击后隐藏li-ul-li
        typeAll(){
            // console.log('222',this.lotsLX)
            this.lotsLX =null;
            this.typeAllShow = false;
            this.filterObj.type_pid='';
            this.filterObj.type_id='';
        },
        //物资所在地的全部点击后隐藏li-ul-li
        adressAll(){
            this.adressAllShow=false;
            this.filterObj.location_pid='';
            this.filterObj.location_id='';
            this.lotsAreaStyle = null;
        },
        buyDetail(val){
            let {href}= this.$router.resolve({
                path: '/wasteShopping/begShopDetails',   // 这里写的是要跳转的路由地址
                query: {wasteId:val.id}// 这里写的是页面参数
            });
            window.open(href, '_blank');
        },
        // ---------分页
        handleSizeChange(val) {
        this.filterObj.limit = val;
        },
        //----- 分页---------
        handleCurrentChange(val) {
        this.filterObj.page = val;
        }
    }
}
</script>

<style lang="less" scoped>
@import '@/styles/index.less';
.sellList{
    min-height: 100vh;
    padding: 20px 0;
    .stateFoucs{
        background-color: @base-color;
        color: #fff;
    }
    .lots_type{
        .table{
            background: #fafafa;
            border: 1px solid #e6e6e6;
            border-radius: 8px;
            font-size: 12px;
            .tr_border{
                display: flex;
                border-bottom: 1px solid #e6e6e6;
                min-height: 46px;
            }
            .td_type{
                width: 90px;
                border-right: 1px solid #e6e6e6;
                text-align: center;
                padding-top: 14px;
            }
            .td_all{
                display: flex;
                color: #3d4246;
                padding: 10px;
                    // align-items: center;
                .td_all_val{
                    // width: 90px;
                    text-align: center;
                    cursor: pointer;
                    padding: 4px 10px;
                    margin: 0px 8px;
                    border-radius: 14px;
                    width: 24px;
                    height: 16px;
                    line-height: 16px;
                    background-color: @base-color;
                    color: #fff;
                    
                }
                .ta_all_item{
                    width: 982px;
                    .all_item_value{
                        width: 100%;
                        background: #e6e6e6;
                        display: flex;
                        border-radius: 6px;
                        ul{
                            display: flex;
                            justify-content: space-between;
                            flex-wrap:wrap;
                            &:after{
                                content: '';
                                flex: auto;
                                // width: 90px;
                            }
                            li{
                                .all_li_span{
                                    background-color: @base-color;
                                    color: #fff;
                                }
                                // width: 90px;
                                span{
                                    display: inline-block;
                                    padding: 4px 10px;
                                    margin: 4px 6px;
                                    border-radius: 14px;
                                }
                                span:hover{
                                    background-color: @base-color;
                                    color: #fff;
                                    cursor: pointer;
                                }
                                span:focus{
                                    background-color: @base-color;
                                    color: #fff;
                                }
                            }
                        }
                    }

                }

                

            }
            .tr4{
                display: flex;
            }

            
        }
        
    }
    .stateAll{
        width: 982px;
    }
    .all_item_ul{
        display: flex;
        justify-content: space-between;
        flex-wrap:wrap;
        &:after{
            content: '';
            flex: auto;
        }
        li{
            span{
                display: inline-block;
                padding: 2px 10px;
                margin: 1px 6px;
                border-radius: 14px;
            }
            span:hover{
                background-color: @base-color;
                color: #fff;
                cursor: pointer;
            }
        }
    }
    .footer_page{
        margin: 26px 0;
        /deep/ .el-pagination{
            display: flex;
            justify-content: center;
        }
    }

    .pai-item-list{
        margin-top: 20px;
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill,278px);
        grid-gap: 20px;
        .link_wrap{
            position: relative;
            display: inline-block;
            width: 280px;
            height: 355px;
            text-decoration: none;
            .item_card{
                border-radius: 8px;
                .image {
                    height: 240px;
                    .lot_pic{
                        display: block;
                        width: 100%;
                        height: 240px;
                        /deep/.el-image__inner{
                            object-fit: cover;
                        }
                    }
                }
                .item_content{    
                    font-family: PingFangSC-Medium,PingFang SC;         
                    .item_title{
                        height: 36px;
                        line-height: 36px;
                        font-size: 14px;
                        background-color: #F2F4F5;
                        padding: 0 12px; 
                    }
                    .item_money{
                        padding: 8px 12px;
                        font-size: 12px;
                        color: #666;
                        .item_money_time{
                            p{
                                display: inline-block;  
                            }
                            
                            p:last-of-type{
                                font-size: 12px;
                                font-weight: 400;
                                position: absolute;
                                right: 0px;
                                padding: 2px 8px 2px 12px;
                                height: 20px;
                                line-height: 20px;
                                text-align: center;
                                border-radius: 12px 0px 0px 12px;
                                color: #fff;
                            }
                            .moneyBig{
                                font-size: 20px;
                                font-weight: bold;
                                margin-left: 4px;
                                margin-top: 4px;
                            }
                        }
                    }
                    .item_money{
                        p{
                            margin-bottom: 10px;
                        }
                    }
                    

                }
            }
            .item_card:hover{
                border: 1px solid #cc0000;
            }
        }
    }
}
</style>